<style lang='scss'>
	.site-setting-page {
		font-size: 15px;
		.theme-setting {
			.title-contain {
				display: flex;
				.title {
					flex-grow: 1;
				}
				.el-button {
					padding: 0px 8px 0px 0px;
				}
			}
			.setting-item {
				display: flex;
	    	align-items: center;
	    	.el-color-picker {
	    		margin-left: 10px;
	    	}
			}
		}
		.upload-favicon {
			display: inline-block;
			height: 32px;
			line-height: 32px;
		}
	}
</style>
<template>
	<div class="setting-page site-setting-page">
		<el-card class="security-setting" shadow="hover">
			<div slot="header" class="title-contain">
				<span>基本信息
					<span class="remark-text">（公司名称和网站备案号隐藏在网站页脚中）</span>
				</span>
			</div>
		  <div>
		  	<div class="settings-contain">
	  			<p class="setting-item">
	  				<span class="title">公司名称：</span>
	  				<span class="value" v-if="base_info.companyName">{{base_info.companyName}}</span>
	  				<el-button type="text" @click="modifyBaseInfo('公司名称', 'company_name')">更改</el-button>
	  			</p>
	  			<p class="setting-item">
	  				<span class="title">网站标题：</span>
	  				<span class="value" v-if="base_info.siteTitle">{{base_info.siteTitle}}</span>
	  				<el-button type="text" @click="modifyBaseInfo('网站标题', 'site_title')">更改</el-button>
	  			</p>
	  			<p class="setting-item" style="display: flex;">
		  			<span class="title">网站图标：</span>
		  			<span class="value" style="display: flex;align-items: center;">
		  				<uploadImg width=32 :size_limit="10" :show_limit_text="false" class="upload-favicon" :file_data.sync="site_icon_file"></uploadImg>
		  			</span>
		  			<el-button type="text" v-if="can_set_icon" @click="setSiteIcon">更改</el-button>
		  		</p>
	  			<p class="setting-item">
		  			<span class="title">公司描述：</span>
		  			<el-button type="text" @click="alertMessage('公司描述', base_info.companyDesc)">查看</el-button>
		  			<el-button type="text" @click="modifyBaseInfo('公司描述', 'company_desc')">更改</el-button>
		  		</p>
		  		<p class="setting-item">
		  			<span class="title">网站备案号：</span>
		  			<el-button type="text" @click="alertMessage('网站备案号', base_info.recordCode)">查看</el-button>
		  			<el-button type="text" @click="modifyBaseInfo('网站备案号', 'record_code')">更改</el-button>
		  		</p>
		  	</div>
		  </div>
		  <formDialog ref="second_form_dialog" prop_title="提示" :prop_form_arr="[{title:'二级密码',key:'second_pw', type:'password'}]"></formDialog>
		  <formDialog ref="edit_dialog"></formDialog>
		</el-card>
		<el-card class="theme-setting" shadow="hover">
			<div slot="header" class="title-contain">
				<span class="title">主题设置</span>
				<template v-if="theme_modify">
					<el-button type='text' @click="editColor">修改</el-button>
					<el-button type='text' @click="cancelColorEdit">取消</el-button>
				</template>
			</div>
		  <div>
		  	<div class="settings-contain">
		  		<div class="setting-row">
		  			<p class="setting-item">
			  			<span class="title">标题栏背景：</span>
			  			<el-color-picker size='small' v-model="theme_config.titleBarBg" :predefine="[default_theme_config.titleBarBg]" @change="colorChangeHandle"></el-color-picker>
			  		</p>
			  		<p class="setting-item">
			  			<span class="title">标题栏文本：</span>
			  			<el-color-picker size='small' v-model="theme_config.titleBarColor" :predefine="[default_theme_config.titleBarColor]" @change="colorChangeHandle"></el-color-picker>
			  		</p>
		  		</div>
		  		<div class="setting-row">
			  		<p class="setting-item">
			  			<span class="title">标题栏待选：</span>
			  			<el-color-picker size='small' v-model="theme_config.titleBarHover" :predefine="[default_theme_config.titleBarHover]" @change="colorChangeHandle"></el-color-picker>
			  		</p>
			  		<p class="setting-item">
			  			<span class="title">标题栏强调：</span>
			  			<el-color-picker size='small' v-model="theme_config.titleBarStress" :predefine="[default_theme_config.titleBarStress]" @change="colorChangeHandle"></el-color-picker>
			  		</p>
		  		</div>
		  		<div class="setting-row">
		  			<p class="setting-item">
			  			<span class="title">侧边栏背景：</span>
			  			<el-color-picker size='small' v-model="theme_config.navBarBg" :predefine="[default_theme_config.navBarBg]" @change="colorChangeHandle"></el-color-picker>
			  		</p>
			  		<p class="setting-item">
			  			<span class="title">侧边栏文本：</span>
			  			<el-color-picker size='small' v-model="theme_config.navBarColor" :predefine="[default_theme_config.navBarColor]" @change="colorChangeHandle"></el-color-picker>
			  		</p>
		  		</div>
		  		<div class="setting-row">
			  		<p class="setting-item">
			  			<span class="title">侧边栏选中：</span>
			  			<el-color-picker size='small' v-model="theme_config.navBarSelect" :predefine="[default_theme_config.navBarSelect]" @change="colorChangeHandle"></el-color-picker>
			  		</p>
			  		<p class="setting-item">
			  			<span class="title">侧边栏图标：</span>
			  			<el-color-picker size='small' v-model="theme_config.navBarIcon" :predefine="[default_theme_config.navBarIcon]" @change="colorChangeHandle"></el-color-picker>
			  		</p>
		  		</div>
		  	</div>
		  </div>
		  <formDialog ref="second_form_dialog" prop_title="提示" :prop_form_arr="[{title:'二级密码',key:'second_pw', type:'password'}]" @change="colorChangeHandle"></formDialog>
		  <formDialog ref="edit_dialog"></formDialog>
		</el-card>
		<el-card class="security-setting" shadow="hover">
			<div slot="header" class="title-contain">
				<span>其他设置
					<span class="remark-text error-remark-text">（服务器重启会使以下设置重置）</span>
				</span>
			</div>
		  <div>
		  	<div class="settings-contain">
		  		<p class="setting-item">
		  			<span class="title">显示用户职位：</span>
		  			<el-switch
		  				:value="show_user_job"
		  				@change="triggerShowJob">
						</el-switch>
		  		</p>
		  		<p class="setting-item">
		  			<span class="title">用户默认密码：</span>
		  			<el-button type="text" v-if="user_default_pw==''" @click="scanUserDefaultPw">查看</el-button>
		  			<span v-else class="setting-value">{{user_default_pw}}</span>
		  			<el-button type="text" @click="modifyUserDefaultPasswd">更改</el-button>
		  		</p>
		  		<p class="setting-item">
		  			<span class="title">cookie加密秘钥：</span>
		  			<el-button type="text" v-if="encrypt_key==''" @click="scanEncryptKey">查看</el-button>
		  			<span v-else class="setting-value">{{encrypt_key}}</span>
		  			<el-button type="text" @click="modifyEncryptKey">更改</el-button>
		  		</p>
		  	</div>
		  </div>
		  <formDialog ref="second_form_dialog" prop_title="提示" :prop_form_arr="[{title:'二级密码',key:'second_pw', type:'password'}]"></formDialog>
		  <formDialog ref="edit_dialog"></formDialog>
		</el-card>
	</div>
</template>
<script>
	import cusInput from 'components/cus_input.vue';
	import formDialog from 'components/form_dialog.vue';
	import uploadImg from 'components/upload_img.vue';
	export default {
		data() {
			return {
				user_default_pw: '',
				encrypt_key: '',
				site_icon_file: '',
				theme_config: {},
				theme_modify: '',
				theme_config_bak: {},
				show_user_job: false
			}
		},
		computed: {
			site_icon() {
				return this.$store.state.site_icon_url;
			},
			base_info() {
				return this.$store.getters.site_info;
			},
			default_theme_config() {
				return this.$store.state.default_theme_config;
			},
			can_set_icon() {
				return this.site_icon_file && typeof this.site_icon_file != 'string';
			}
		},
		watch: {
			site_icon(val) {
				this.site_icon_file = val;
			}
		},
		methods: {
			setSiteIcon() {
				if(this.can_set_icon) {
					this.$refs.second_form_dialog.showData(({second_pw}) => {
						this.secondpwDialogBack(second_pw, () => {
							let send_data = new FormData();
							send_data.append('second_passwd', second_pw);
							send_data.append('icon', this.site_icon_file);
							return this.$axios.post('/admin/setFavicon', send_data).then(res => {
								if(res.s == 1) {
									this.$message.success('修改成功');
									this.$store.commit('updateSiteIcon');
								}
								return res;
							})
						});
					});
				}
			},
			triggerShowJob(val) {
				this.$refs.second_form_dialog.showData(({second_pw}) => {
					this.secondpwDialogBack(second_pw, () => {
						return this.$axios.post('/admin/setShowUserJob', {second_passwd: second_pw, show_user_job: val}).then(res => {
							if(res.s == 1) {
								this.show_user_job = val;
							}
							return res;
						})
					});
				});
			},
			colorChangeHandle() {
				let res = {};
				let this_theme_config = this.theme_config;
				for(let item in this.theme_config_bak) {
					if(this.theme_config_bak[item] != this_theme_config[item]) {
						res[item] = this_theme_config[item];
					}
				}
				this.theme_modify = Object.keys(res).length ? res : '';
				this.$store.commit('updateTheme', this_theme_config);
			},
			cancelColorEdit() {
				this.theme_config = Object.assign({}, this.theme_config_bak);
				this.$store.commit('updateTheme', this.theme_config_bak);
				this.theme_modify = '';
			},
			editColor() {
				if(this.theme_modify && Object.keys(this.theme_modify).length) {
					this.$refs.second_form_dialog.showData(({second_pw}) => {
						this.secondpwDialogBack(second_pw, () => {
							return this.$axios.post('/admin/editTheme', Object.assign({second_passwd: second_pw}, this.theme_modify)).then(res => {
		      			if(res.s == 1) {
		      				this.$message.success('修改成功');
		      				this.theme_config_bak = Object.assign({}, this.theme_config);
		      				this.theme_modify = '';
		      				const loading = this.$loading({
					          lock: true,
					          text: '更新中',
					          background: 'rgba(0, 0, 0, 0.7)'
					        });
		    					this.$store.dispatch('loadTheme').finally(()=>{
		    						loading.close();
		    					})
		    				}
		      			return res;
		      		})
						});
					});
				}
			},
			getTransKey(key) {
				let res_key = '';
				switch(key) {
					case 'company_name': res_key = 'companyName';break;
					case 'site_title': res_key = 'siteTitle';break;
					case 'company_desc': res_key = 'companyDesc';break;
					case 'record_code': res_key = 'recordCode';break;
					default: res_key = key;break;
				}
				return res_key;
			},
			alertMessage(title, message) {
				this.$alert(message, title, {
          confirmButtonText: '确定',
          callback: ()=>{}
        });
			},
			scanUserDefaultPw() {
				this.$refs.second_form_dialog.showData(({second_pw}) => {
					this.secondpwDialogBack(second_pw, () => {
						return this.$axios.get('/admin/getUserDefaultPw', {second_passwd: second_pw}).then(res => {
	      			if(res.s == 1) this.user_default_pw = res.d;
	      			return res;
	      		})
					});
				});
			},
			scanEncryptKey() {
				this.$refs.second_form_dialog.showData(({second_pw}) => {
					this.secondpwDialogBack(second_pw, () => {
						return this.$axios.get('/admin/getEncryptKey', {second_passwd: second_pw}).then(res => {
	      			if(res.s == 1) this.encrypt_key = res.d;
	      			return res;
	      		})
					});
				});
			},
			secondpwDialogBack(second_pw, operate_fun) {
				if(second_pw) {
					let dialog = this.$refs.second_form_dialog;
					dialog.triggerLoading();

					operate_fun().then(res=>{
						if(res.s == 1) dialog.close();
					}).finally(() => {
      			dialog.triggerLoading(false);
      		})
				}else {
					this.$message.error('二级密码不能为空');
				}
			},
			modifyBaseInfo(title, key) {
				this.$refs.edit_dialog.showData(form_data => {
					this.setData("editCompany", form_data, key);
				}, "修改"+title, [{title:title,key:key,default_val:this.base_info[this.getTransKey(key)],type:key=='company_desc'?'textarea':'text'},{title:"二级密码",key:"second_passwd",type:'password'}])
			},
			modifyUserDefaultPasswd() {
				this.$refs.edit_dialog.showData(form_data => {
					this.setData("setUserDefaultPw", form_data);
				}, "修改用户默认密码", [{title:"用户默认密码",key:"new_passwd",type:'password'},{title:"二级密码",key:"second_passwd",type:'password'}])
			},
			modifyEncryptKey() {
				this.$refs.edit_dialog.showData(form_data => {
					this.setData("setEncryptKey", form_data);
				}, "修改cookie加密秘钥", [{title:"加密秘钥",key:"new_passwd",type:'password'},{title:"二级密码",key:"second_passwd",type:'password'}], "修改后需要重新登录")
			},
			setData(path_name, data, param_name) {
				//非空检测
				let check = true;
				for(let item in data) {
					if(data[item] == '' || data[item] == undefined) {
						check = false;
					}
				}
				if(!check) {
					this.$message.error('所有参数不能为空');return;
				}

				//格式检测
				let error_info = "";
				if(path_name == "setUserDefaultPw" || path_name == "setEncryptKey") {
					if(data.new_passwd && data.new_passwd.length < 8) {
						error_info = "密码至少8位";
					}
				}else if(path_name == 'editCompany' && param_name) {
					if(data[param_name] == this.base_info[this.getTransKey(param_name)]) {
						error_info = "数据没有改变";
					}
				}
				if(error_info) {
					this.$message.error(error_info);return;
				}

				let dialog = this.$refs.edit_dialog;
				dialog.triggerLoading();
				this.$axios.post('/admin/'+path_name, data).then(res => {
    			if(res.s == 1) {
    				dialog.close();
    				if(path_name == 'editCompany') {
    					this.$message.success('修改成功');
    					const loading = this.$loading({
			          lock: true,
			          text: '更新中',
			          background: 'rgba(0, 0, 0, 0.7)'
			        });
    					this.$store.dispatch('loadSiteInfo').finally(()=>{
    						loading.close();
    					})
    				}else if(this.user_default_pw && path_name == 'setUserDefaultPw') {
    					this.$message.success('修改成功');
    					this.user_default_pw = res.d;
    				}else if(this.encrypt_key && path_name == 'setEncryptKey') {
    					this.$message.success('修改成功，请重新登录');
  						this.$router.push({name:'login'});
    				}
    			}
    		}).finally(() => {
    			dialog.triggerLoading(false);
    		})
			},
		},
		created() {
			this.site_icon_file = this.site_icon;
			this.theme_config = this.$store.getters.theme_config;
			this.theme_config_bak = Object.assign({}, this.theme_config);
			this.$axios.get('/admin/getShowUserJob').then(res => {
				if(res.s == 1) {
					this.show_user_job = res.d;
				}
			});
		},
		beforeDestroy() {
			if(this.theme_modify) {
				this.cancelColorEdit();
				this.$message.warning('有修改未提交，已自动取消');
			}
		},
		components: {
			cusInput,
			uploadImg,
			formDialog
		}
	}
</script>